<template>
	<view class="catagory">
		<navigator class="catagory-item" hover-class="none" url="/pages/index/index" v-for="item in catagorys" :key="item">
			<image class="icon" :src="`/statics/${item.icon}`" ></image>
			<text class="text">item.value</text>
		</navigator>
	</view>
</template>

<script setup lang="ts">
	const data = reactive({
	  queryParams: {
	    queryStr: undefined,
	    userType: undefined,
	  },
	  catagorys: []
	});
	const {
	  queryParams,
	  catagorys
	} = toRefs(data);
</script>

<style lang="scss">
.category{
	margin: 20rpx 0 0;
	padding: 10rpx 0;
	display: flex;
	flex-warp: wrap;
	min-height :328rpx;
	.category-item{
		width:20%;
		display:flex;
		justify-content:center;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		
		.icon{
			width:100rpx;
			height:100rpx;
		}
		.text{
			font-size:26rpx;
			color:#666;
		}
	}
}
</style>
